<link rel="stylesheet" type="text/css" href="{{ script_root }}/plugins/ctfd-acm-challenges/assets/vendor/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="{{ script_root }}/plugins/ctfd-acm-challenges/assets/vendor/mdn-like.min.css">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#challenge">Challenge</a>
                </li>
                {% if solves == None %}
				{% else %}
                    <li class="nav-item">
                        <a class="nav-link challenge-solves" href="#solves">
                            {{ solves }} {% if solves > 1 %}Solves{% else %}Solves{% endif %}
                        </a>
                    </li>
                {% endif %}
            </ul>
            <div role="tabpanel">
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade show active" id="challenge">
                        <h2 class='challenge-name text-center pt-3'>{{ name }}</h2>
                        <h3 class="challenge-value text-center">{{ value }}</h3>
                        <div class="challenge-tags text-center">
                            {% for tag in tags %}
                                <span class='badge badge-info challenge-tag'>{{ tag }}</span>
                            {% endfor %}
                        </div>
                        <br>
                        <span class="challenge-desc">{{ description | safe }}</span>
                        <br>
                        <textarea id="submission-input" style="display: none;"></textarea>
                        <br>
                        <div class="row submit-row">
                            <div class="col-md-9 form-group">
                                <input id="challenge-id" type="hidden" value="{{ id }}">
                                <select 
                                    id="submission-language"
                                    class="form-control"
                                    onchange="CTFd._internal.challenge.postRender()"
                                >
                                    <option value="">Select Language: </option>
                                    <option value="cpp">C++</option>
                                    <option value="java">Java</option>
                                    <option value="python3">Python 3</option>
                                    <option value="python2">Python 2</option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group key-submit">
                                <button for="submission-language" type="submit" id="submit-key"
                                        class="btn btn-md btn-outline-secondary float-right"
                                >Submit
                                </button>
                            </div>
                            
                        </div>
                        <div class="row notification-row">
                            <div class="col-md-12">
                                <div id="result-notification" class="alert alert-dismissable text-center w-100"
                                     role="alert" style="display: none;">
                                    <strong id="result-message"></strong>
                                </div>
                            </div>
                        </div>

                        <div class="challenge-hints hint-row row">
                            {% for hint in hints %}
								<div class='col-md-12 hint-button-wrapper text-center mb-3'>
									<a class="btn btn-info btn-hint btn-block" href="javascript:;"
									   onclick="javascript:loadhint({{ hint.id }})">
										{% if hint.hint %}
											<small>
												View Hint
											</small>
										{% else %}
											{% if hint.cost %}
												<small>
													Unlock Hint for {{ hint.cost }} points
												</small>
											{% else %}
												<small>
													View Hint
												</small>
											{% endif %}
										{% endif %}
									</a>
								</div>
							{% endfor %}
                        </div>
                        <div class="row challenge-files text-center pb-3">
                            {% for file in files %}
                                <div class='col-md-4 col-sm-4 col-xs-12 file-button-wrapper d-block'>
                                    <a class='btn btn-info btn-file mb-1 d-inline-block px-2 w-100 text-truncate'
                                       href='{{ file }}'>
                                        <i class="fas fa-download"></i>
                                        <small>
                                            {% set segments = file.split('/') %}
                                            {% set file = segments | last %}
                                            {% set token = file.split('?') | last %}
                                            {% if token %}
                                                {{ file | replace("?" + token, "") }}
                                            {% else %}
                                                {{ file }}
                                            {% endif %}
                                        </small>
                                    </a>
                                </div>
                            {% endfor %}
                        </div>


                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="solves">
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-striped text-center">
                                    <thead>
                                    <tr>
                                        <td><b>Name</b>
                                        </td>
                                        <td><b>Date</b>
                                        </td>
                                    </tr>
                                    </thead>
                                    <tbody id="challenge-solves-names">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>